<template>
  <div>
    <h2>店铺动态</h2>
    <ul>
      <li v-for="item in actives" :key="item.id">
        <img :src="item.url" alt="动态图片" />
        <textarea
          placeholder="请输入动态内容"
          cols="30"
          rows="10"
          v-model="item.text"
        ></textarea>
        <input type="button" value="提交" @click="alterActive(item)" />
        <input type="button" value="删除" @click="deleteActive(item)" />
      </li>
      <!-- 添加动态 -->
      <li id="addGood" v-if="!addShow" @click="addShow = !addShow">+</li>
      <li v-if="addShow">
        <form
          action="http://localhost:8080/shop/addShopActive"
          method="post"
          enctype="multipart/form-data"
          target="stop"
        >
          选择动态图片(png格式)：<input
            id="file"
            type="file"
            name="uploadfile"
            multiple="multiple"
          />
          <textarea placeholder="请输入动态内容" cols="30" rows="10" name="text"></textarea>
          <input type="submit" value="提交" />
        </form>
        <iframe name="stop" frameborder="0" style="display: none"></iframe>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      actives: [],
      // 添加li显示和隐藏
      addShow: false,
    };
  },
  methods: {
    // 获取店铺动态
    getShopActives() {
      this.$axios({
        method: "get",
        url: "http://localhost:8080/shop/getShopMsg",
      }).then((res) => {
        res.data.data.shopMsgs.forEach((element) => {
          element.url =
            "http://localhost:8080/shop/getShopMsgImg/1/" + element.id;
          this.actives.push(element);
        });
      });
    },
    // 修改店铺动态信息
    alterActive(item) {
      this.$axios({
        method: "post",
        url: "http://localhost:8080/shop/alterShopActive",
        data: {
          id: item.id,
          text: item.text,
          time: item.time,
        },
      }).then((res) => {
        if (!res.data) {
          alert("提交失败！");
        }
        this.$router.go(0);
      });
    },
    // 删除动态
    deleteActive(item) {
      if (confirm("确定删除该动态吗")) {
        this.$axios({
          method: "get",
          url: "http://localhost:8080/shop/deleteShopActive/" + item.id,
        }).then((res) => {
          if (res.data) {
            alert("删除成功");
            this.$router.go(0);
          }
        });
      }
    },
  },
  mounted() {
    // 获取店铺动态
    this.getShopActives();
  },
};
</script>

<style scoped>
h2 {
  text-align: center;
  color: dimgrey;
  margin: 20px 0;
}
ul {
  list-style: none;
  border: 1px solid dimgrey;
}
li {
  display: flex;
  justify-content: center;
  padding: 10px;
  height: 200px;
  border-bottom: 1px solid dimgrey;
}
img {
  cursor: pointer;
  max-height: 200px;
}
textarea {
  resize: none;
  text-align: center;
  margin-left: 40px;
}
input {
  margin-left: 40px;
  text-align: center;
  padding: 20px;
}
#addGood {
  font-size: xx-large;
  color: dimgray;
  font-weight: 700;
  text-align: center;
  line-height: 200px;
  cursor: pointer;
}
form input[type="file"] {
    margin: 0;
    width: 70px;
    padding: 0;
    margin-right: 40px;
}
form input[type='submit'] {
    height: 200px;
}
form textarea {
    height: 200px;
    float: left;
    margin-right: 40px;
}

</style>